<template>
  <div class="c1">
    <div class="c2">一些文本...</div>
    <div class="c3">过期</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6],
      obj: {
        a: 1,
        b: 2,
        c: 3,
      },
    };
  },
  methods: {},
  mounted() {
    this.arr.forEach(function (item, index) {
      console.log(item, index);
    });
    console.log("________________");
    let newArr = this.arr.map(function (item, index) {
      return item + 1;
    });
    console.log(newArr);
    console.log("________________");
    for (let data in this.obj) {
      console.log(data, this.obj[data]);
    }
    console.log("________________");
    for (let data in this.arr) {
      console.log(data);
    }
    console.log("________________");
    for (let data of this.arr) {
      console.log(data);
    }
    this.objArray();
    this.arrayObj();
  },
  methods: {
    objArray() {
      let arr = ["john-reese", "harold-finch", "sameen-shaw"];
      let objArray = arr.map((item) => {
        item = item.replace("-", " ");
        let a = item[0];
        let b = a.toUpperCase();
        item = item.replace(a, b);
        return { name: item };
      });
      console.log(objArray);
    },

    arrayObj() {
      let arr = [
        { 1: 1, 2: 2, 3: 3 }, { 1: 4, 2: 5, 3: 6 },{ 1: 7, 2: 8, 3: 9 }
      ];
      let newarr = {};
      arr.forEach((item) => {
        // console.log(item);
        for (let key in item) {
          let value = newarr[key];
          if (value) {
            value.push(item[key]);
          } else {
            newarr[key] = [item[key]];
          }
        }
      });
      console.log(newarr); // {1: [1,4,7] , 2:[2,5,8 ], 3:[3,6,9] }
    },
  },
};
</script>

<style lang="scss" scoped>
.c1 {
  position: relative;
  width: 100%;
  background: crimson;
  min-height: calc(100vh - 50px);
}
.c2 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background: yellow;
  padding: 55px;
  text-align: center;
}
.c3 {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 2;
  margin: auto auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: chocolate;
}
</style>
